<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ主界面</title>
<!-- 样式的就近原则：离标签近的样式取胜 -->
<style type="text/css">
body {
	background: #ff00ff;
	margin: 0px;
}

#form-warp {
	/*让左右边距相等，不能是绝对定位*/
	background: #1D9691;
	width: 650px;
	height: 100%;
	/*水平居中*/
	margin: 0 auto;
}

form {
	background-image: url("img/form_bg.png");
	width: 429px;
	height: 302px;
	/*使用绝对定位将form垂直居中*/
	position: absolute;
	/*左上角定位到容器的中央*/
	top: 50%;
	left: 50%;
	/*上左外边距回退一半*/
	margin-top: -151px;
	margin-left: -214px;
}

#username {
	border: 1px solid #0000ff;
	padding: 0px;
	margin: 0px; position : absolute;
	top: 168px;
	left: 132px;
	position: absolute; top : 168px; left : 132px;
	width: 192px;
	height: 26px;
}

#password {
	border: 1px solid #0000ff;
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 194px;
	left: 132px;
	width: 192px;
	height: 26px;
}

#login {
    padding: 0px;
	margin: 0px;
	background-image: url("img/login_bg.png");
	width: 196px;
	height: 32px;
	position: absolute;
	top: 261px;
	left: 132px;
}

#reg-img {
	padding: 0px;
	margin: 0px;
	background-image: url("img/reg_bg.png");
	position:absolute;
	top:170px;
	left:333px;
}

#find-password-img {
	padding: 0px;
	margin: 0px;
	background-image: url("img/find_password_bg.png");
	position:absolute;
	top:198px;
	left:333px;
}
</style>

</head>
<body>

	<!-- 使用斜杠指的目录是服务器的根目录（对tomcal服务是指webapps目录） -->
	<div id="form-warp">
		<form action="reg">

			<input id="username" type="text" name="username" value="xxx">
			<input id="password" type="password" name="password" value="1234">

			<img id="reg-img" alt="xxxx" src="img/reg_bg.png"> <img
				id="find-password-img" alt="yyyyy" src="img/find_password_bg.png">

			<input id="login" type="submit" value="">
		</form>
	</div>

<!-- javascript用于控制标签元素的动作 -->
<script type="text/javascript">

//1、首先要选择操作的元素：因为标签的内容加载到内存中就变成了对象称其为元素
var reg_img=window.document.getElementById("reg-img");
//2、给元素添加事件及处理方法
reg_img.onmouseover=function(evt){
	this.style.cursor="pointer";
	//console.log("xxxx");
	
};
reg_img.onclick=function(){
	//提交表单，向服务发出请求
	var forms=window.document.getElementsByTagName("form");
	forms[0].submit();
	
};

</script>

</body>
</html>